<template>
	<view>
		<view class="my-top">	
		<template  v-if="userinfo.name">
			<view class="my-top1">
						<text> {{ userinfo.name }}</text>
						<image src="../../static/地址.png" mode="" class="img"></image>
			</view>
			</template>
			<template v-else>
				<view class="my-top2">
					<view class="top1-right"><img class="img" src="@/static/地址.png" alt="" /></view>
					<view class="top1-left" @click="gologin">立即登录</view>
				</view>
			</template>
		</view>
		<view class="k"></view>
		<view class="lb">
			<ul class="ul">
				<li class="li">
					<view class="li-left"><img class="img2" src="@/static/地址.png" alt="" /></view>
						<view class="li-right" @click="goaddress">
							<view class="r-1" >我的地址</view>
							<view class="r-2">></view>
						</view>
				</li>
			</ul>
		</view>
		<button class="tc"  v-if="userinfo.name" @click="logout">退出登录</button>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { UserStore } from '../../store/user';
import { reactive, toRefs } from 'vue'
import { storeToRefs } from 'pinia'
const userStore = UserStore()

// 页面加载
onLoad(message => {

})
	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '你是否要退出登录?',
			success: ({ confirm }) => {
				if (!confirm) return
				userStore.userLogout()
			}
		})
	}
	const gologin =  () => {
		uni.navigateTo({ url: '../../subpkg/logoin/logoin'})
	}
	const goaddress =  () => {
		uni.navigateTo({ url: '../../subpkg/address_home/address_home'})
	}
// 页面显示
onShow(() => {
	if (userStore.id) {
		userStore.getUserinfo({id:userStore.id})
	}
})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { userinfo } = storeToRefs(userStore)
</script>

<style lang="scss">
.my-top {
	.my-top1 {
		display: flex;
		justify-content: space-between;
		padding: 60rpx;
		.top-left {
			line-height: 100rpx;
		}
			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			 
		}
	}
	.my-top2 {
		height: 200rpx;
		display: flex;
		.top1-left {
			line-height: 200rpx;
			margin-left: 40rpx;
		}
		.top1-right {
			margin-left: 40rpx;
			width: 100rpx;
			height: 100rpx;
			.img {
				width: 100rpx;
				height: 100rpx;
				margin-top: 50rpx;
				border-radius: 50%;
			}
		}
	}
}
.k {
	height: 10rpx;
	background-color: #eee;
}
.lb {
	.ul {
		.li {
			padding: 40rpx;
			display: flex;
			height: 80rpx;
			.li-left {
				margin-right: 40rpx;
				.img2 {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.li-right {
				width: 600rpx;
				border-bottom: 1px solid #eee;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				.r-2 {
					color: #ccc;
				}
			}
		}
	}
}
.tc {
	width: 670rpx;
	background-color: #fff;
}
</style>
